<template>
	<view>
		<view class="msg-type flex" v-for="(v,i) in list" :key="i" @click="$to(v.path)">
			<image :src="`/static/home/${v.icon}.png`" mode="aspectFill" class="msg-type--icon" />
			<view class="f1 between column">
				<view class="flex align-c">
					<view class="f1 msg-type--name">{{ v.name }}</view>
					<view class="msg-type_time">{{ v.time }}</view>
				</view>
				<view class="flex align-c">
					<view class="f1">{{ v.content }}</view>
					<u-badge v-if="v.num" bgColor="#F51818" color="#FFF" max="99" :value="v.num"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						icon: 'xtxx',
						name: '系统消息',
						content: '暂无消息提醒',
						time: '00:00',
						num: 0,
						path: '/pages/home/message',
					},
					{
						icon: 'pjtz',
						name: '评价通知',
						content: '用户对您进行了评价',
						time: '00:00',
						num: 0,
						path: '/pages/mine/user_evaluation',
					}
				],
				detail: null,
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.hideTabBar();
			this.getMsg();
		},
		methods: {
			async getMsg() {
				let res = await this.$api.get('staff/msg');
				if(res.code == 200) {
					console.log(res,1111);
					this.detail = res.data;
					this.watchMsg();
				}
			},
			watchMsg() {
				const { detail } = this;
				if(detail) {
					this.list[0].content = detail.sys.count?`您有${detail.sys.count}条系统消息待查看`:'暂无消息提醒';
					this.list[0].time = detail.sys.date;
					this.list[0].num = detail.sys.count;
					
					this.list[1].content = detail.coms.count?`用户对您进行了评价`:'暂无评价';
					this.list[1].time = detail.coms.date;
					this.list[1].num = detail.coms.count;
					// this.list = [
					// 	{
					// 		icon: 'xtxx',
					// 		name: '系统消息',
					// 		content: detail.sys.count?`您有${detail.sys.count}条系统消息待查看`:'暂无消息提醒',
					// 		time: detail.sys.date,
					// 		num: detail.sys.count,
					// 	},
					// 	{
					// 		icon: 'pjtz',
					// 		name: '课程审核',
					// 		content: detail.coms.count?`您有${detail.coms.count}条课程待审核`:'暂无可审核课程',
					// 		time: detail.coms.date,
					// 		num: detail.coms.count,
					// 	}
					// ];
				}
			},
			async getSee(v) {
				if(v.icon == 'pjtz') {
					let res = await this.$api.get('staff/read');
					if(res.code == 200) {
						this.$to(v.path)
					}
				}
				
			}
		}
	}
</script>


<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	.msg-type {
		margin: 27rpx;
		font-size: 27rpx;
		color: #999999;
		margin-bottom: 36rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #F5F5F5;
		>.f1 {
			margin: 2rpx 25rpx;
			margin-right: 0;
		}
		&--name {
			font-size: 29rpx;
			color: #000;
		}
		&--icon {
			width: 87rpx;
			height: 87rpx;
		}
		&_time {
			font-size: 24rpx;
		}
	}
</style>